<template>
  <div>
    <h1>Create</h1>
    <el-form
      v-loading="isLoading"
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="文章标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input v-model="ruleForm.author"></el-input>
      </el-form-item>
      <el-form-item label="发布时间" required>
        <el-col :span="11">
          <el-form-item prop="publish_time">
            <el-date-picker
              type="date"
              placeholder="选择发布日期"
              v-model="ruleForm.publish_time"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="详情" prop="details">
        <el-input type="textarea" v-model="ruleForm.details"></el-input>
      </el-form-item>
      <el-form-item label="是否发布" prop="is_publish">
        <el-switch
          v-model="ruleForm.is_publish"
          :active-value="1"
          :inactive-value="0"
        ></el-switch>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >立即创建</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import axios from 'axios'
import { createArticle } from "@/api";

export default {
  name: "ArticlesCreate",
  data() {
    return {
      isLoading: false,
      ruleForm: {
        title: "",
        publish_time: "",
        is_publish: false,
        details: "",
        author: ""
      },
      rules: {
        title: [
          { required: true, message: "请输文章标题", trigger: "blur" },
          { min: 5, max: 25, message: "长度在 5 到 25 个字符", trigger: "blur" }
        ],
        author: [{ required: true, message: "请输作者", trigger: "blur" }],
        publish_time: [
          {
            type: "date",
            required: true,
            message: "请选择发布日期",
            trigger: "change"
          }
        ],
        details: [
          { required: true, message: "请填写文章详情", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          try {
            this.isLoading = true;
            await createArticle(this.ruleForm);
            this.$router.push({
              name: "articles-index"
            });
          } catch (e) {
            this.$notify.error({
              title: "错误",
              message: "网络错误"
            });
          } finally {
            this.isLoading = false;
          }
          /*axios({
            method: 'POST',
            url: 'http://localhost:3000/articles',
            data: {
              ...this.ruleForm
            }
          }).then(() => {
            this.$router.push({
              name: 'articles-index'
            })
          }).catch(() => {

          }).finally(() => {

          })*/
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped></style>
